<template>
  <div class="settings-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">
          <Icon name="settings" :size="24" />
          系统设置
        </h1>
        <p class="page-description">配置和管理您的应用设置</p>
      </div>

      <div class="header-right">
        <Button type="secondary" icon="download" @click="exportSettings">
          导出设置
        </Button>

        <Button type="secondary" icon="upload" @click="importSettings">
          导入设置
        </Button>

        <Button
          type="primary"
          icon="save"
          @click="saveAllSettings"
          :loading="saving"
        >
          保存设置
        </Button>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="main-content">
      <!-- 侧边栏导航 -->
      <div class="sidebar">
        <nav class="settings-nav">
          <div
            v-for="section in settingSections"
            :key="section.id"
            class="nav-item"
            :class="{ active: activeSection === section.id }"
            @click="activeSection = section.id"
          >
            <Icon :name="section.icon" :size="16" />
            <span>{{ section.name }}</span>
            <Icon
              v-if="hasUnsavedChanges(section.id)"
              name="circle"
              :size="6"
              class="unsaved-indicator"
            />
          </div>
        </nav>
      </div>

      <!-- 设置内容 -->
      <div class="settings-content">
        <!-- 通用设置 -->
        <div v-if="activeSection === 'general'" class="setting-section">
          <div class="section-header">
            <h2 class="section-title">通用设置</h2>
            <p class="section-description">配置应用的基本设置和行为</p>
          </div>

          <div class="setting-groups">
            <!-- 语言设置 -->
            <div class="setting-group">
              <h3 class="group-title">语言和地区</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">界面语言</label>
                  <p class="setting-desc">选择应用界面显示的语言</p>
                </div>
                <select
                  v-model="settings.general.language"
                  class="setting-select"
                >
                  <option value="zh-CN">简体中文</option>
                  <option value="zh-TW">繁体中文</option>
                  <option value="en-US">English</option>
                  <option value="ja-JP">日本語</option>
                </select>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">时区</label>
                  <p class="setting-desc">设置时间显示的时区</p>
                </div>
                <select
                  v-model="settings.general.timezone"
                  class="setting-select"
                >
                  <option value="Asia/Shanghai">北京时间 (UTC+8)</option>
                  <option value="Asia/Tokyo">东京时间 (UTC+9)</option>
                  <option value="America/New_York">纽约时间 (UTC-5)</option>
                  <option value="Europe/London">伦敦时间 (UTC+0)</option>
                </select>
              </div>
            </div>

            <!-- 启动设置 -->
            <div class="setting-group">
              <h3 class="group-title">启动设置</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">开机自启动</label>
                  <p class="setting-desc">系统启动时自动运行应用</p>
                </div>
                <ToggleSwitch v-model="settings.general.autoStart" />
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">启动时最小化</label>
                  <p class="setting-desc">启动后最小化到系统托盘</p>
                </div>
                <ToggleSwitch v-model="settings.general.startMinimized" />
              </div>
            </div>
          </div>
        </div>

        <!-- 外观设置 -->
        <div v-if="activeSection === 'appearance'" class="setting-section">
          <div class="section-header">
            <h2 class="section-title">外观设置</h2>
            <p class="section-description">自定义应用的外观和主题</p>
          </div>

          <div class="setting-groups">
            <!-- 主题设置 -->
            <div class="setting-group">
              <h3 class="group-title">主题</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">主题模式</label>
                  <p class="setting-desc">选择应用的主题模式</p>
                </div>
                <div class="theme-selector">
                  <div
                    v-for="theme in themeOptions"
                    :key="theme.value"
                    class="theme-option"
                    :class="{
                      active: settings.appearance.theme === theme.value,
                    }"
                    @click="settings.appearance.theme = theme.value"
                  >
                    <div class="theme-preview" :class="theme.value">
                      <div class="preview-header"></div>
                      <div class="preview-content">
                        <div class="preview-sidebar"></div>
                        <div class="preview-main"></div>
                      </div>
                    </div>
                    <span class="theme-name">{{ theme.name }}</span>
                  </div>
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">主色调</label>
                  <p class="setting-desc">选择应用的主色调</p>
                </div>
                <div class="color-picker">
                  <div
                    v-for="color in colorOptions"
                    :key="color.value"
                    class="color-option"
                    :class="{
                      active: settings.appearance.primaryColor === color.value,
                    }"
                    :style="{ backgroundColor: color.color }"
                    @click="settings.appearance.primaryColor = color.value"
                  >
                    <Icon
                      v-if="settings.appearance.primaryColor === color.value"
                      name="check"
                      :size="12"
                    />
                  </div>
                </div>
              </div>
            </div>

            <!-- 字体设置 -->
            <div class="setting-group">
              <h3 class="group-title">字体</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">字体大小</label>
                  <p class="setting-desc">调整界面文字的大小</p>
                </div>
                <div class="font-size-slider">
                  <span class="size-label">小</span>
                  <input
                    v-model="settings.appearance.fontSize"
                    type="range"
                    min="12"
                    max="18"
                    step="1"
                    class="slider"
                  />
                  <span class="size-label">大</span>
                  <span class="size-value"
                    >{{ settings.appearance.fontSize }}px</span
                  >
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">字体族</label>
                  <p class="setting-desc">选择界面使用的字体</p>
                </div>
                <select
                  v-model="settings.appearance.fontFamily"
                  class="setting-select"
                >
                  <option value="system">系统默认</option>
                  <option value="sans-serif">无衬线字体</option>
                  <option value="serif">衬线字体</option>
                  <option value="monospace">等宽字体</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <!-- 聊天设置 -->
        <div v-if="activeSection === 'chat'" class="setting-section">
          <div class="section-header">
            <h2 class="section-title">聊天设置</h2>
            <p class="section-description">配置聊天功能和行为</p>
          </div>

          <div class="setting-groups">
            <!-- 消息设置 -->
            <div class="setting-group">
              <h3 class="group-title">消息显示</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">显示时间戳</label>
                  <p class="setting-desc">在消息中显示发送时间</p>
                </div>
                <ToggleSwitch v-model="settings.chat.showTimestamp" />
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">显示头像</label>
                  <p class="setting-desc">在消息中显示用户和AI头像</p>
                </div>
                <ToggleSwitch v-model="settings.chat.showAvatar" />
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">消息气泡样式</label>
                  <p class="setting-desc">选择消息的显示样式</p>
                </div>
                <select
                  v-model="settings.chat.bubbleStyle"
                  class="setting-select"
                >
                  <option value="modern">现代风格</option>
                  <option value="classic">经典风格</option>
                  <option value="minimal">简约风格</option>
                </select>
              </div>
            </div>

            <!-- 输入设置 -->
            <div class="setting-group">
              <h3 class="group-title">输入设置</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">发送快捷键</label>
                  <p class="setting-desc">设置发送消息的快捷键</p>
                </div>
                <select
                  v-model="settings.chat.sendShortcut"
                  class="setting-select"
                >
                  <option value="enter">Enter</option>
                  <option value="ctrl-enter">Ctrl + Enter</option>
                  <option value="shift-enter">Shift + Enter</option>
                </select>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">启用语音输入</label>
                  <p class="setting-desc">允许使用语音输入消息</p>
                </div>
                <ToggleSwitch v-model="settings.chat.enableVoiceInput" />
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">自动保存草稿</label>
                  <p class="setting-desc">自动保存未发送的消息内容</p>
                </div>
                <ToggleSwitch v-model="settings.chat.autoSaveDraft" />
              </div>
            </div>
          </div>
        </div>

        <!-- AI设置 -->
        <div v-if="activeSection === 'ai'" class="setting-section">
          <div class="section-header">
            <h2 class="section-title">AI设置</h2>
            <p class="section-description">配置AI助手的行为和参数</p>
          </div>

          <div class="setting-groups">
            <!-- 模型设置 -->
            <div class="setting-group">
              <h3 class="group-title">模型配置</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">默认模型</label>
                  <p class="setting-desc">选择默认使用的AI模型</p>
                </div>
                <select
                  v-model="settings.ai.defaultModel"
                  class="setting-select"
                >
                  <option value="gpt-4">GPT-4</option>
                  <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
                  <option value="claude-3">Claude 3</option>
                  <option value="gemini-pro">Gemini Pro</option>
                </select>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">响应温度</label>
                  <p class="setting-desc">控制AI回复的创造性程度 (0-1)</p>
                </div>
                <div class="temperature-slider">
                  <span class="temp-label">保守</span>
                  <input
                    v-model="settings.ai.temperature"
                    type="range"
                    min="0"
                    max="1"
                    step="0.1"
                    class="slider"
                  />
                  <span class="temp-label">创新</span>
                  <span class="temp-value">{{ settings.ai.temperature }}</span>
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">最大令牌数</label>
                  <p class="setting-desc">限制AI回复的最大长度</p>
                </div>
                <input
                  v-model.number="settings.ai.maxTokens"
                  type="number"
                  min="100"
                  max="4000"
                  step="100"
                  class="setting-input"
                />
              </div>
            </div>

            <!-- 行为设置 -->
            <div class="setting-group">
              <h3 class="group-title">行为设置</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">启用上下文记忆</label>
                  <p class="setting-desc">AI会记住之前的对话内容</p>
                </div>
                <ToggleSwitch v-model="settings.ai.enableMemory" />
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">自动人格切换</label>
                  <p class="setting-desc">根据对话内容自动切换合适的人格</p>
                </div>
                <ToggleSwitch v-model="settings.ai.autoPersonaSwitch" />
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">响应延迟</label>
                  <p class="setting-desc">模拟真实对话的响应延迟</p>
                </div>
                <select
                  v-model="settings.ai.responseDelay"
                  class="setting-select"
                >
                  <option value="none">无延迟</option>
                  <option value="short">短延迟 (0.5-1s)</option>
                  <option value="medium">中等延迟 (1-2s)</option>
                  <option value="long">长延迟 (2-3s)</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <!-- 隐私设置 -->
        <div v-if="activeSection === 'privacy'" class="setting-section">
          <div class="section-header">
            <h2 class="section-title">隐私设置</h2>
            <p class="section-description">管理您的隐私和数据安全</p>
          </div>

          <div class="setting-groups">
            <!-- 数据收集 -->
            <div class="setting-group">
              <h3 class="group-title">数据收集</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">使用统计</label>
                  <p class="setting-desc">允许收集匿名使用统计数据</p>
                </div>
                <ToggleSwitch v-model="settings.privacy.analytics" />
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">错误报告</label>
                  <p class="setting-desc">自动发送错误报告以改进应用</p>
                </div>
                <ToggleSwitch v-model="settings.privacy.errorReporting" />
              </div>
            </div>

            <!-- 数据存储 -->
            <div class="setting-group">
              <h3 class="group-title">数据存储</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">本地存储聊天记录</label>
                  <p class="setting-desc">在本地设备上保存聊天历史</p>
                </div>
                <ToggleSwitch v-model="settings.privacy.localStorage" />
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">数据加密</label>
                  <p class="setting-desc">加密存储的敏感数据</p>
                </div>
                <ToggleSwitch v-model="settings.privacy.encryption" />
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">自动清理</label>
                  <p class="setting-desc">定期清理过期的数据</p>
                </div>
                <select
                  v-model="settings.privacy.autoCleanup"
                  class="setting-select"
                >
                  <option value="never">从不</option>
                  <option value="weekly">每周</option>
                  <option value="monthly">每月</option>
                  <option value="quarterly">每季度</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <!-- 高级设置 -->
        <div v-if="activeSection === 'advanced'" class="setting-section">
          <div class="section-header">
            <h2 class="section-title">高级设置</h2>
            <p class="section-description">高级用户配置选项</p>
          </div>

          <div class="setting-groups">
            <!-- 开发者选项 -->
            <div class="setting-group">
              <h3 class="group-title">开发者选项</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">调试模式</label>
                  <p class="setting-desc">启用调试信息和开发者工具</p>
                </div>
                <ToggleSwitch v-model="settings.advanced.debugMode" />
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">API日志</label>
                  <p class="setting-desc">记录API请求和响应日志</p>
                </div>
                <ToggleSwitch v-model="settings.advanced.apiLogging" />
              </div>
            </div>

            <!-- 实验性功能 -->
            <div class="setting-group">
              <h3 class="group-title">实验性功能</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">新UI预览</label>
                  <p class="setting-desc">体验新版本的用户界面</p>
                </div>
                <ToggleSwitch v-model="settings.advanced.newUI" />
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">Beta功能</label>
                  <p class="setting-desc">启用测试中的新功能</p>
                </div>
                <ToggleSwitch v-model="settings.advanced.betaFeatures" />
              </div>
            </div>

            <!-- 重置选项 -->
            <div class="setting-group">
              <h3 class="group-title">重置选项</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">重置所有设置</label>
                  <p class="setting-desc">将所有设置恢复为默认值</p>
                </div>
                <Button type="danger" @click="resetAllSettings">
                  重置设置
                </Button>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <label class="setting-label">清除所有数据</label>
                  <p class="setting-desc">删除所有本地数据和缓存</p>
                </div>
                <Button type="danger" @click="clearAllData"> 清除数据 </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 保存状态提示 -->
    <div v-if="saveStatus" class="save-status" :class="saveStatus.type">
      <Icon :name="saveStatus.icon" :size="16" />
      <span>{{ saveStatus.message }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from "vue";
import { useSettingsStore } from "@/stores/settings";
import Icon from "@/components/common/Icon.vue";
import Button from "@/components/common/Button.vue";
import ToggleSwitch from "@/components/common/ToggleSwitch.vue";

interface SettingSection {
  id: string;
  name: string;
  icon: string;
}

interface ThemeOption {
  value: string;
  name: string;
}

interface ColorOption {
  value: string;
  color: string;
  name: string;
}

interface SaveStatus {
  type: "success" | "error" | "warning";
  icon: string;
  message: string;
}

// Store
const settingsStore = useSettingsStore();

// 响应式数据
const activeSection = ref("general");
const saving = ref(false);
const saveStatus = ref<SaveStatus | null>(null);

// 设置数据
const settings = ref({
  general: {
    language: "zh-CN",
    timezone: "Asia/Shanghai",
    autoStart: false,
    startMinimized: false,
  },
  appearance: {
    theme: "auto",
    primaryColor: "blue",
    fontSize: 14,
    fontFamily: "system",
  },
  chat: {
    showTimestamp: true,
    showAvatar: true,
    bubbleStyle: "modern",
    sendShortcut: "enter",
    enableVoiceInput: true,
    autoSaveDraft: true,
  },
  ai: {
    defaultModel: "gpt-4",
    temperature: 0.7,
    maxTokens: 2000,
    enableMemory: true,
    autoPersonaSwitch: false,
    responseDelay: "short",
  },
  privacy: {
    analytics: true,
    errorReporting: true,
    localStorage: true,
    encryption: true,
    autoCleanup: "monthly",
  },
  advanced: {
    debugMode: false,
    apiLogging: false,
    newUI: false,
    betaFeatures: false,
  },
});

// 原始设置（用于检测更改）
const originalSettings = ref(JSON.parse(JSON.stringify(settings.value)));

// 设置分类
const settingSections: SettingSection[] = [
  { id: "general", name: "通用", icon: "settings" },
  { id: "appearance", name: "外观", icon: "palette" },
  { id: "chat", name: "聊天", icon: "message-circle" },
  { id: "ai", name: "AI助手", icon: "cpu" },
  { id: "privacy", name: "隐私", icon: "shield" },
  { id: "advanced", name: "高级", icon: "code" },
];

// 主题选项
const themeOptions: ThemeOption[] = [
  { value: "light", name: "浅色" },
  { value: "dark", name: "深色" },
  { value: "auto", name: "自动" },
];

// 颜色选项
const colorOptions: ColorOption[] = [
  { value: "blue", color: "#3b82f6", name: "蓝色" },
  { value: "green", color: "#10b981", name: "绿色" },
  { value: "purple", color: "#8b5cf6", name: "紫色" },
  { value: "pink", color: "#ec4899", name: "粉色" },
  { value: "orange", color: "#f59e0b", name: "橙色" },
  { value: "red", color: "#ef4444", name: "红色" },
];

// 计算属性
const hasUnsavedChanges = (sectionId: string) => {
  const currentSection =
    settings.value[sectionId as keyof typeof settings.value];
  const originalSection =
    originalSettings.value[sectionId as keyof typeof originalSettings.value];
  return JSON.stringify(currentSection) !== JSON.stringify(originalSection);
};

const hasAnyUnsavedChanges = computed(() => {
  return (
    JSON.stringify(settings.value) !== JSON.stringify(originalSettings.value)
  );
});

// 方法
const saveAllSettings = async () => {
  try {
    saving.value = true;

    // 模拟保存延迟
    await new Promise((resolve) => setTimeout(resolve, 1000));

    // 保存设置到store
    await settingsStore.updateSettings(settings.value);

    // 更新原始设置
    originalSettings.value = JSON.parse(JSON.stringify(settings.value));

    // 显示成功状态
    showSaveStatus({
      type: "success",
      icon: "check",
      message: "设置已保存",
    });
  } catch {
    // 保存设置失败
    showSaveStatus({
      type: "error",
      icon: "x",
      message: "保存失败，请重试",
    });
  } finally {
    saving.value = false;
  }
};

const showSaveStatus = (status: SaveStatus) => {
  saveStatus.value = status;
  setTimeout(() => {
    saveStatus.value = null;
  }, 3000);
};

const exportSettings = () => {
  const data = {
    settings: settings.value,
    exportTime: new Date().toISOString(),
    version: "1.0.0",
  };

  const blob = new Blob([JSON.stringify(data, null, 2)], {
    type: "application/json",
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = `settings-${Date.now()}.json`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
};

const importSettings = () => {
  const input = document.createElement("input");
  input.type = "file";
  input.accept = ".json";
  input.onchange = (e) => {
    const file = (e.target as HTMLInputElement).files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        try {
          const data = JSON.parse(e.target?.result as string);
          if (data.settings) {
            settings.value = { ...settings.value, ...data.settings };
            showSaveStatus({
              type: "success",
              icon: "upload",
              message: "设置已导入",
            });
          }
        } catch {
          // 导入设置失败
          showSaveStatus({
            type: "error",
            icon: "x",
            message: "导入失败，文件格式错误",
          });
        }
      };
      reader.readAsText(file);
    }
  };
  input.click();
};

const resetAllSettings = () => {
  if (confirm("确定要重置所有设置吗？此操作不可撤销。")) {
    // 重置为默认值
    settings.value = {
      general: {
        language: "zh-CN",
        timezone: "Asia/Shanghai",
        autoStart: false,
        startMinimized: false,
      },
      appearance: {
        theme: "auto",
        primaryColor: "blue",
        fontSize: 14,
        fontFamily: "system",
      },
      chat: {
        showTimestamp: true,
        showAvatar: true,
        bubbleStyle: "modern",
        sendShortcut: "enter",
        enableVoiceInput: true,
        autoSaveDraft: true,
      },
      ai: {
        defaultModel: "gpt-4",
        temperature: 0.7,
        maxTokens: 2000,
        enableMemory: true,
        autoPersonaSwitch: false,
        responseDelay: "short",
      },
      privacy: {
        analytics: true,
        errorReporting: true,
        localStorage: true,
        encryption: true,
        autoCleanup: "monthly",
      },
      advanced: {
        debugMode: false,
        apiLogging: false,
        newUI: false,
        betaFeatures: false,
      },
    };

    showSaveStatus({
      type: "warning",
      icon: "refresh-cw",
      message: "设置已重置",
    });
  }
};

const clearAllData = () => {
  if (
    confirm(
      "确定要清除所有数据吗？这将删除所有聊天记录、知识库和缓存，此操作不可撤销。",
    )
  ) {
    // 清除数据的逻辑
    localStorage.clear();
    sessionStorage.clear();

    showSaveStatus({
      type: "warning",
      icon: "trash",
      message: "所有数据已清除",
    });
  }
};

// 监听器
watch(
  settings,
  () => {
    // 自动保存某些设置
    const autoSaveSettings = ["appearance.theme", "appearance.primaryColor"];
    // 这里可以实现自动保存逻辑
  },
  { deep: true },
);

// 生命周期
onMounted(async () => {
  try {
    // 从store加载设置
    const savedSettings = await settingsStore.getSettings();
    if (savedSettings) {
      settings.value = { ...settings.value, ...savedSettings };
      originalSettings.value = JSON.parse(JSON.stringify(settings.value));
    }
  } catch {
    // 加载设置失败
  }
});
</script>

<style scoped>
/* 页面基础样式 */
.settings-page {
  padding: 24px;
  background-color: var(--bg-primary);
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.header-left {
  flex: 1;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.page-description {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

.header-right {
  display: flex;
  gap: 12px;
}

/* 主要内容 */
.main-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
}

/* 侧边栏 */
.sidebar {
  background-color: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  height: fit-content;
  position: sticky;
  top: 24px;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
}

.nav-item:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.nav-item.active {
  background-color: var(--primary-color-light);
  color: var(--primary-color);
}

.unsaved-indicator {
  position: absolute;
  right: 8px;
  color: var(--warning-color);
}

/* 设置内容 */
.settings-content {
  background-color: var(--bg-secondary);
  border-radius: 12px;
  padding: 32px;
}

.setting-section {
  max-width: 800px;
}

.section-header {
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.section-description {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

/* 设置组 */
.setting-groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.setting-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.group-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px;
}

/* 设置项 */
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-color);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
}

.setting-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.setting-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* 设置控件 */
.setting-select {
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
}

.setting-select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.setting-input {
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
}

.setting-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* 主题选择器 */
.theme-selector {
  display: flex;
  gap: 16px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-option.active .theme-preview {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-color-light);
}

.theme-preview {
  width: 80px;
  height: 60px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.theme-preview.light {
  background-color: #ffffff;
}

.theme-preview.dark {
  background-color: #1a1a1a;
}

.theme-preview.auto {
  background: linear-gradient(45deg, #ffffff 50%, #1a1a1a 50%);
}

.preview-header {
  height: 16px;
  background-color: var(--bg-tertiary);
}

.preview-content {
  display: flex;
  height: 44px;
}

.preview-sidebar {
  width: 24px;
  background-color: var(--bg-secondary);
}

.preview-main {
  flex: 1;
  background-color: var(--bg-primary);
}

.theme-name {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 颜色选择器 */
.color-picker {
  display: flex;
  gap: 8px;
}

.color-option {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.active {
  border-color: var(--text-primary);
}

.color-option svg {
  color: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* 滑块控件 */
.font-size-slider,
.temperature-slider {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
}

.size-label,
.temp-label {
  font-size: 12px;
  color: var(--text-tertiary);
  min-width: 24px;
}

.slider {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background-color: var(--bg-tertiary);
  outline: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--primary-color);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--primary-color);
  cursor: pointer;
  border: none;
}

.size-value,
.temp-value {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 32px;
  text-align: right;
}

/* 保存状态 */
.save-status {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  animation: slideIn 0.3s ease;
}

.save-status.success {
  background-color: var(--success-color);
  color: white;
}

.save-status.error {
  background-color: var(--error-color);
  color: white;
}

.save-status.warning {
  background-color: var(--warning-color);
  color: white;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 响应式 */
@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 240px 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .settings-page {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
  }

  .header-right {
    align-self: stretch;
  }

  .main-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sidebar {
    order: 2;
    position: static;
  }

  .settings-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
  }

  .nav-item {
    white-space: nowrap;
    min-width: fit-content;
  }

  .settings-content {
    order: 1;
    padding: 24px;
  }

  .setting-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .theme-selector {
    justify-content: center;
  }

  .font-size-slider,
  .temperature-slider {
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .settings-page {
    padding: 12px;
  }

  .page-title {
    font-size: 24px;
  }

  .header-right {
    flex-direction: column;
    gap: 8px;
  }

  .settings-content {
    padding: 20px;
  }

  .section-title {
    font-size: 20px;
  }

  .theme-selector {
    gap: 12px;
  }

  .theme-preview {
    width: 60px;
    height: 45px;
  }

  .color-picker {
    justify-content: center;
  }
}
</style>
